<template>
  <div class="DataSetList flex-1">
    <MyTable
      ref="$table"
      v-model:query-items="queryItems"
      :columns="columns"
      :query-schemas="querySchemas"
      :get-data="dataSetApi.list"
      :index="true"
      :selection="true"
      @update:checked-row-keys="handleCheck"
    >
      <template #handle>
        <n-button color="#6D61E3" @click="handleAdd">
          <template #icon>
            <n-icon size="16" :component="FileUploadOutlined"></n-icon>
          </template>
          上传数据
        </n-button>
        <n-button color="#6D61E3" @click="handleAdd">
          <template #icon>
            <n-icon size="16" :component="FileUploadOutlined"></n-icon>
          </template>
          上传数据
        </n-button>
        <n-button color="#6D61E3" @click="handleAdd">
          <template #icon>
            <n-icon size="16" :component="FileUploadOutlined"></n-icon>
          </template>
          上传数据
        </n-button>
        <n-button color="#6D61E3" @click="handleAdd">
          <template #icon>
            <n-icon size="16" :component="FileUploadOutlined"></n-icon>
          </template>
          上传数据
        </n-button>
        <n-button color="#6D61E3" @click="handleAdd">
          <template #icon>
            <n-icon size="16" :component="FileUploadOutlined"></n-icon>
          </template>
          上传数据
        </n-button>
      </template>
    </MyTable>
    <!-- <Teleport v-if="isMounted" :to="appStore.containerDom">
      <div class="teleport-area search-box">
        <div class="search-forms">
          <n-input
            v-model:value="queryItems.name"
            class="search"
            placeholder="请输入数据集名称"
            :clearable="true"
            @clear="goSearch"
            @keyup.enter="goSearch"
          >
            <template v-if="appStore.isDeep" #clear-icon>
              <img src="@/assets/images/deep-clear.svg" />
            </template>
            <template #suffix>
              <img :src="appStore.searchImg" />
            </template>
          </n-input>
        </div>
        <div class="search-buttons">
          <n-button color="#6D61E3" @click="handleAdd">
            <template #icon>
              <n-icon size="16" :component="FileUploadOutlined"></n-icon>
            </template>
            上传数据
          </n-button>
        </div>
      </div>
    </Teleport> -->
    <MyForm ref="$form" :model-form="model" :disabled="type === 'view'" @submit="handleSubmit">
      <n-form-item
        label="数据集名称"
        path="datasetName"
        :rule="{ required: true, message: '请输入数据集名称' }"
      >
        <n-input
          v-model:value="model.datasetName"
          maxlength="50"
          show-count
          clearable
          placeholder="请输入数据集名称"
        />
      </n-form-item>
      <n-form-item
        label="数据集类型"
        path="typeId"
        :rule="{ required: true, message: '请选择数据集类型' }"
      >
        <AsyncSelect
          v-model:value="model.typeId"
          :options="getTypeList"
          label-key="name"
          value-key="id"
          placeholder="请选择数据集类型"
        />
      </n-form-item>
      <n-form-item
        label="数据集来源"
        path="sourceId"
        :rule="{ required: true, message: '请选择数据集来源' }"
      >
        <AsyncSelect
          v-model:value="model.sourceId"
          :options="getSourceList"
          label-key="name"
          value-key="id"
          placeholder="请选择数据集来源"
        />
      </n-form-item>
      <n-form-item
        label="数据集场景"
        path="scenarioId"
        :rule="{ required: true, message: '请选择数据集场景' }"
      >
        <AsyncSelect
          v-model:value="model.scenarioId"
          :options="getScenarioList"
          label-key="name"
          value-key="id"
          placeholder="请选择数据集场景"
        />
      </n-form-item>
      <n-form-item
        label="元任务类型"
        path="metaTaskTypeId"
        :rule="{ required: true, message: '请选择元任务类型' }"
      >
        <AsyncSelect
          v-model:value="model.metaTaskTypeId"
          :options="getMateTaskTypeList"
          label-key="metaTaskName"
          value-key="id"
          placeholder="请选择元任务类型"
        />
      </n-form-item>
      <n-form-item label="上传文件" path="rawFileUrl">
        <FileUpload v-model="model.rawFileUrl" :accept="['zip']" />
      </n-form-item>
    </MyForm>
  </div>
</template>
<script setup lang="jsx">
import * as testObjectApi from '@/api/testObject'
import * as dataSetApi from '@/api/dataSet'
import { useCrud } from '@/hooks/useCrud'
import { useMounted } from '@/hooks/useMounted'
import FileUploadOutlined from '@vicons/material/FileUploadOutlined'
import { useAppStore } from '@/store'
defineOptions({
  name: 'DataSetList',
})
const appStore = useAppStore()
const queryItems = reactive({
  name: null,
  typeId: null,
})
const columns = [
  {
    title: '数据集名称',
    key: 'datasetName',
  },
  {
    key: 'typeName',
    title: () => (
      <MyFilter
        text="数据集类型"
        v-model={[queryItems.typeId, 'value']}
        onUpdateValue={goSearch}
        options={dataSetApi.typeList}
        labelKey="name"
        valueKey="id"
      />
    ),
  },
  {
    title: '上传时间',
    key: 'createTime',
    render: ({ createTime }) => $format(createTime),
  },
  {
    title: '操作',
    key: 'actions',
    width: appStore.isDeep ? 164 : 140,
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return (
        <n-flex>
          <ActionButton onClick={() => handleEdit(row)}>修改</ActionButton>
          <ActionButton
            onClick={() =>
              handleDel(row, {
                content: `请确定是否删除：${row.datasetName}`,
              })
            }
          >
            删除
          </ActionButton>
        </n-flex>
      )
    },
  },
]

const querySchemas = [
  {
    field: 'name',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入数据集名称',
    },
  },
  {
    field: 'typeId',
    component: 'AsyncSelect',
    label: '类型1',
    componentProps: {
      placeholder: '请输入数据集类型',
      options: dataSetApi.typeList,
      labelKey: 'name',
      valueKey: 'id',
    },
  },
  {
    field: 'typeId2',
    component: 'AsyncSelect',
    label: '类型2',
    componentProps: {
      placeholder: '请输入数据集类型',
      options: dataSetApi.typeList,
      labelKey: 'name',
      valueKey: 'id',
      multiple: true,
    },
    fieldFormat: 'ArrayJoin',
  },
  {
    field: 'dateRange',
    label: '时间范围',
    component: 'NDatePicker',
    componentProps: {
      type: 'daterange',
    },
    fieldFormat: 'DateSplit',
    area: 'drawer',
  },
  {
    field: 'name2',
    label: '名称2',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入数据集名称',
    },
    area: 'drawer',
  },
  {
    field: 'name3',
    component: 'NInput',
    componentProps: {
      placeholder: '请输入数据集名称',
    },
    area: 'drawer',
  },

  {
    field: 'dateRange',
    label: '时间范围',
    component: 'NDatePicker',
    componentProps: {
      type: 'daterange',
    },
    fieldFormat: 'DateSplit',
    area: 'drawer',
  },
]

function getTypeList() {
  return dataSetApi.typeList()
}

function getSourceList() {
  return dataSetApi.sourceList()
}

function getScenarioList() {
  return dataSetApi.scenarioList()
}

function getMateTaskTypeList() {
  return testObjectApi.metaTaskTypeList({ inDataset: 1 })
}

function goSearch() {
  nextTick(() => {
    $table.value.handleSearch()
  })
}
const { isMounted } = useMounted()

const { type, model, $form, $table, handleAdd, handleEdit, handleDel, handleSubmit } = useCrud({
  name: '数据集',
  initForm: {
    id: null,
    datasetName: null,
    typeId: null,
    sourceId: null,
    scenarioId: null,
    metaTaskTypeId: null,
    rawFileUrl: [],
  },
  apis: {
    add: dataSetApi.add,
    edit: dataSetApi.edit,
    del: ({ id }) => dataSetApi.del(id),
    view: ({ id }) => dataSetApi.info(id).then((res) => res.data),
  },
})

function handleCheck(keys) {
  console.log(keys)
}
</script>
<style lang="scss" scoped></style>
